// 引入echarts
import echarts from 'echarts'

let myEcharts = {
  EchartsDataFormate: {
    /**
     * 饼图数据格式化
     */
    NoGroupFormate: (data) => {
      // category 的数据存储
      var categorys = []
      // data 的数据存储
      var datas = []
      // 遍历
      for (var i = 0; i < data.length; i++) {
        categorys.push(data[i].name || '')
        // 定义一个中间变量
        var temp = {
          value: data[i].value || 0,
          name: data[i].name || ''
        }
        datas.push(temp)
      }
      return { categorys: categorys, data: datas }
    },
    /**
     * 柱状图/折线图数据格式化
     */
    groupFormatter: (data, type) => {
      // 定义类型的数据存储
      let group = []
      // 定义serise 的数据存储
      let serise = []
      for (let item in data) {
        let tempSerise = {}
        if (data[item].name) group.push(data[item].name)
        tempSerise = {
          name: data[item].name ? data[item].name : '',
          type: type,
          data: data[item].value
        }
        serise.push(tempSerise)
      }
      return {group: group, data: serise}
    }
  },
  // 生成图形option
  EchartsOption: {
    /**
     * 柱状图
     * @param {*} title 标题
     * @param {*} subtext 副标题
     * @param {*} dataX x轴数据
     * @param {*} dataLegend 图例数据
     * @param {*} dataSeries 显示数据
     */
    bar (title, subtext, dataX = [], data) {
      let datas = myEcharts.EchartsDataFormate.groupFormatter(data, 'bar')
      let option = {
        // 标题
        title: {
          text: title || '', // 标题
          subtext: subtext || '', // 副标题
          x: 'center' // 位置默认居中
        },
        // color: dataColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 组建
        legend: {
          data: datas.group,
          align: 'left',
          right: 10,
          top: 0,
          textStyle: {
            color: '#262626'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: datas.data
      }
      return option
    },
    /**
     * 饼图
     * @param title ： 标题<br>
     * @param subtext ：副标题<br>
     * @param data : json 数据
     */
    pie: function (title, subtext, data) {
      // 数据格式
      let datas = myEcharts.EchartsDataFormate.NoGroupFormate(data)
      let option = {
        // 标题
        title: {
          text: title || '', // 标题
          subtext: subtext || '', // 副标题
          x: 'center' // 位置默认居中
        },
        // 提示
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 组建
        legend: {
          orient: 'horizontal', // 垂直：vertical； 水平 horizontal
          bottom: '5%',
          data: datas.categorys
        },
        series: [
          {
            name: title || '',
            type: 'pie', // 类型
            radius: '48%', // 圆的大小
            center: ['50%', '50%'], // 位置居中
            data: datas.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            // 引导线
            labelLine: {
              normal: {
                show: true,
                length: 2
              }
            }
          }
        ]
      }
      return option
    }
  },
  /**
   *
   * @param option : option
   * @param echartId : 图表的id 需要加引号
   */
  initChart (option, echartId) {
    let container = document.getElementById(echartId)
    let myChart = echarts.init(container)
    myChart.setOption(option, true)
    return myChart
  }
}

export default myEcharts
